<template>
    <div class="address-edit-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
             {{title}}
            </template>
        </nav-bar>
        <van-address-edit
             class="edit"
            :area-list="areaList"
            :address-info="addressInfo"
            :show-delete="type == 'edit'"
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['请选择','请选择','请选择']"
            @save="onSave"
            @delete="onDelete"
        />
    </div>
</template>
<style>
.edit .van-field_body textarea{
    height: 26px !important;
}
.address-edit-box{
    margin-top: 44px;
}
.van-address-edit .van-button--danger{
    background: var(--color-tint);
    background-color: var(--color-tint);
}
.van-switch--on{
    background: var(--color-tint);
}

</style>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import { reactive,onMounted,toRefs,computed } from 'vue';
import { Toast } from 'vant';
import { addAddress,EditAddress,DeleteAddress,getAddressDetail,getAddressMoren} from '@/network/address';
import { useRouter, useRoute } from 'vue-router';
import { areaList } from '@vant/area-data';

import {tdist} from '@/utils/Address'
export default({
    components:{
        NavBar
    },
    setup(){
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            searchResult:[],
            addressInfo:{},
            type:'add',
            addressId:'',
            title:''
        })
        onMounted(()=>{
            // 接受参数
            const {type, addressId} = route . query;
            state.type = type;
            state.addressId= addressId;
            if(type == 'edit'){
                getAddressDetail(addressId).then(res=>{
                    const addressDetail = res;
                    let _areaCode=''
                    const province = tdist.getLev1()
                    Object.entries(areaList.county_list).forEach(([id,text])=>{
                         // 先找出对应的区
                        if(text == addressDetail.county){
                            // 找到区对应的儿个省份
                            const provinceIndex = province.findIndex(item=>item.id.substr(0,2) == id.substr(0,2))
                             // 找到区对应的几个市区
                             const cityItem = Object.entries(areaList.city_list).filter(([cityId,city])=> cityId.substr(0,4) == id.substr(0,4))
                            //  对比找到的省份和接口返回省份是否相等，因为有一些地区会重名
                            if(province[provinceIndex].text = addressDetail.province && cityItem[1] == addressDetail.city){
                                _areaCode = id
                            }
                        }
                    })
                    state.addressInfo = {
                        name:addressDetail.name,
                        tel:addressDetail.phone,
                        province:addressDetail.province,
                        city:addressDetail.city,
                        county:addressDetail.county,
                        areaCode:_areaCode,
                        addressDetail:addressDetail.address,
                        isDefault: !!addressDetail.is_default
                    }
                })
            }

        })
        const title = computed(()=>{
            return state.type == 'add' ? '新增地址' : '编辑地址'
        })
        const onSave = (content) =>{
            console.log(content);
            const params = {
             name:content.name,
            
             phone:content.tel,
             province:content.province,
             city:content.city,
             county:content.county,
             address:content.addressDetail,
             is_default:content.isDefault ? 1 : 0
            }
            if(state.type == 'edit'){
                // 修改参数
                EditAddress(state.addressId,params)
            }else if(state.type == 'add'){
                // 调用接口添加数据

                addAddress(params)
               
            }
            Toast('保存成功')
            setTimeout(()=>{
                router.back()
            },1000)
        }
        const onDelete =()=>{
            DeleteAddress(state.addressId).then(res=>{
                Toast('删除成功')
                setTimeout(()=>{
                    router.back()
                }, 1000)
            })
        }
        return {
            ...toRefs(state),
            onSave,
            onDelete,
            title,
            areaList
        }
    }

})
</script>
<!-- info:信息 search:搜索 column:专栏 placeholder:占位符 field:领域 danger:危险 tint:色调 utils:实用工具
entries:分录   area:地区   county:县 find"找到 filter:滤波器 county:县 parmas:参数

-->